<template>
  <div class="all">
    <div class="one p-R-22">
      <div class="one1 margin-t15">
        <div class="gang"></div>
        <div class="use">用电量</div>
        <svg-icon class="tu" icon-class="useEnergy" />
      </div>
      <div style="display:flex;">
        <div v-for="item,index in electricityList" :key="index" class="block">
          <div class="pailie">
            <div class="a1"></div>
            <div class="a2">{{ item.title }}</div>
          </div>
          <div style="font-size:20px; margin: 12px 0;">{{ item.value }} kwh</div>
          <div
            v-if="item.title !== '今日用量' && item.title !== '昨日用量'"
            style="font-size:13px; color:#9FA0A0"
          >日期范围：{{ item.startTime }} ~ {{ item.endTime }}</div>
        </div>
      </div>
    </div>
    <div class="two p-R-22">
      <div class="one1 margin-t15">
        <div class="gang"></div>
        <div class="use">用水量</div>
        <svg-icon class="tu1" icon-class="water" />
      </div>
      <div style="display:flex;">
        <div v-for="item,index in waterList" :key="index" class="block">
          <div class="pailie">
            <div class="a1"></div>
            <div class="a2">{{ item.title }}</div>
          </div>
          <div style="font-size:20px; margin: 12px 0;">{{ item.value }} 吨</div>
          <div
            v-if="item.title !== '今日用量' && item.title !== '昨日用量'"
            style="font-size:13px; color:#9FA0A0"
          >日期范围：{{ item.startTime }} ~ {{ item.endTime }}</div>
        </div>
      </div>
    </div>
    <div class="three p-R-22">
      <div style="width: 32%;">
        <div
          style="display: flex; width: 100%;justify-content: space-between;align-items: center;"
        >
          <div class="one1">
            <div class="gang"></div>
            <div class="use">本月能耗情况分布</div>
          </div>
          <div>
            <span
              :class="biao === '电表'? 'sameBiao samedif':'sameBiao'"
              @click="showBingtu('电表')"
            >电</span>
            <span
              :class="biao === '水表'? 'sameBiao samedif':'sameBiao'"
              @click="showBingtu('水表')"
            >水</span>
          </div>
        </div>
        <div style="width: 100%; height:85%">
          <Pchart nowwidth="100%" nowheight="300px" :cdata="series" />
        </div>
      </div>
      <div class="fenge"></div>
      <div style="width: 63%;">
        <div
          style="display: flex; width: 100%;justify-content: space-between;align-items: center;"
        >
          <div class="one1">
            <div class="gang"></div>
            <div class="use">能耗趋势分析</div>
          </div>
          <div class="one1">
            <div
              class="sameTime"
              :class="timeJ === '年'? 'sameTimeDiff':''"
              @click="getJiange('年')"
            >当年</div>
            <div
              class="sameTime"
              :class="timeJ === '月'? 'sameTimeDiff':''"
              @click="getJiange('月')"
            >当月</div>
            <div
              class="sameTime"
              :class="timeJ === '日'? 'sameTimeDiff':''"
              @click="getJiange('日')"
            >当天</div>
          </div>
          <div style="display:flex; align-items: center;">
            <div style="margin-right:10px">
              <span
                :class="biao1 === '电'? 'sameBiao samedif':'sameBiao'"
                @click="showBingtu1('电')"
              >电</span>
              <span
                :class="biao1 === '水'? 'sameBiao samedif':'sameBiao'"
                @click="showBingtu1('水')"
              >水</span>
            </div>
            <div v-if="biao1 === '电'">
              <el-select
                v-model="params.dataItemId"
                placeholder="请选择设备"
                @change="getEquipDate"
              >
                <el-option
                  v-for="item in dianList"
                  :key="item.dataItemId"
                  :label="item.equipmentName"
                  :value="item.dataItemId"
                />
              </el-select>
            </div>
            <div v-if="biao1 === '水'">
              <el-select v-model="params.dataItemId" placeholder="请选择设备">
                <el-option
                  v-for="item in shuiList"
                  :key="item.dataItemId"
                  :label="item.equipmentName"
                  :value="item.dataItemId"
                  @change="getEquipDate"
                />
              </el-select>
            </div>
          </div>
        </div>
        <div style="width: 100%; height:85%">
          <Lchart nowwidth="100%" nowheight="320px" :cdata="series1" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { mymixin } from "@/utils/mixins";
import Pchart from "@/components_yy/Echarts/components/piechart/newChart.vue";
import Lchart from "@/components_yy/Echarts/components/linechart/chartThree.vue";
import Api from "@/api/livestock-manage/energy-management/statisticalDataApi";
import deviceApi from "@/api/livestock-manage/energy-management/deviceApi";
export default {
  name: "StatisticalData",
  components: {
    Pchart,
    Lchart
  },
  mixins: [mymixin],
  data() {
    return {
      biao: "",
      biao1: "",
      timeJ: "",
      electricityList: [],
      waterList: [],
      shuiList: [],
      dianList: [],
      params: {
        accuracy: "",
        dataItemId: "",
        startTime: "",
        endTime: ""
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["45%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "outside"
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: "bold"
            }
          },
          labelLine: {
            show: true
          },

          bottom: 30,
          data: [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" }
          ]
        }
      ],
      series1: {
        seriesData: [
          {
            data: [],
            type: "line",
            areaStyle: {}
          }
        ],
        unitName: "",
        xAxisdata: []
      }
    };
  },
  created() {
    this.getStatisticalData();
    this.showBingtu("电表");
    this.getEquip();
    this.getJiange("月");
  },
  mounted() {},
  methods: {
    getXdata(date) {
      date = date.substring(
        this.timeJ === "日" ? 5 : this.timeJ === "月" ? 5 : 5
      );
      return date;
    },
    getEquip() {
      deviceApi.conditionQuery({ type: "电表" }).then(res => {
        this.dianList = res.data || [];
      });
      deviceApi.conditionQuery({ type: "水表" }).then(res => {
        this.shuiList = res.data || [];
      });
    },
    getStatisticalData() {
      Api.getStatisticalData("电表").then(res => {
        this.electricityList = res.data || [];
        this.showBingtu1("电");
      });
      Api.getStatisticalData("水表").then(res => {
        this.waterList = res.data || [];
      });
    },
    getJiange(e) {
      this.timeJ = e;
      let endTime = this.dateToFormat(new Date());
      this.params.endTime = endTime;
      let currentYear = new Date().getFullYear();
      if (e === "年") {
        let startTime = currentYear + "-01-01 00:00:00";
        this.params.startTime = startTime;
        this.params.accuracy = 1;
      }
      if (e === "月") {
        const m = (new Date().getMonth() + 1 + "").padStart(2, "0");
        let startTime = `${currentYear}-${m}-01 00:00:00`;
        this.params.startTime = startTime;
        this.params.accuracy = 2;
      }
      if (e === "日") {
        const m = (new Date().getMonth() + 1 + "").padStart(2, "0");
        const d = (new Date().getDate() + "").padStart(2, "0");
        let startTime = `${currentYear}-${m}-${d} 00:00:00`;
        this.params.startTime = startTime;
        this.params.accuracy = 3;
      }
      this.getEquipDate();
    },
    // 获取能耗趋势分析数据
    getEquipDate() {
      if (this.params.dataItemId) {
        Api.queryByEnergyCount(this.params).then(res => {
          if (res.data) {
            let data = res.data;
            this.series1 = {
              seriesData: [
                {
                  data: data.map(item => item.countvalue),
                  type: "line",
                  name: this.biao1 + "表",
                  areaStyle: {}
                }
              ],
              yAxisName: this.biao1 === "电" ? "kwh" : "m³",
              xAxisName:
                this.timeJ === "年" ? "月" : this.timeJ === "月" ? "号" : "点",
              unitName: "",
              xAxisdata: data.map(item => {
                return this.getXdata(item.collectDate);
              }),
              xData: [this.biao1 + "表"]
            };
          }
        });
      }
    },
    showBingtu1(e) {
      this.biao1 = e;
      if (e === "电") {
        this.$set(this.params, "dataItemId", this.dianList[0].dataItemId);
      } else {
        this.$set(this.params, "dataItemId", this.shuiList[0].dataItemId);
      }
      this.getEquipDate();
    },
    showBingtu(e) {
      this.biao = e;
      Api.queryEnergyDistribution(e).then(res => {
        if (res.data && res.data.length > 0) {
          let data = res.data.map(item => {
            return { name: item.title, value: item.value };
          });
          this.series[0].data = data;
        } else {
          this.series[0].data = [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" }
          ];
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.margin-t15 {
  margin-bottom: 15px;
}
.one {
  height: 20%;
  padding-top: 12px;
  box-shadow: 0 0 3px 1px rgba(45, 45, 45, 0.2);
  margin-bottom: 0.8%;
}
.two {
  padding-top: 12px;
  height: 20%;
  box-shadow: 0 0 3px 1px rgba(45, 45, 45, 0.2);
  margin-bottom: 0.8%;
}
.three {
  display: flex;
  padding-top: 16px;
  height: 56%;
  box-shadow: 0 0 3px 1px rgba(45, 45, 45, 0.2);
  color: #000000 !important;
}
.fenge {
  border-right: solid 1px #cecdcd;
  margin: 0px 30px;
  margin-bottom: 25px;
}
.all {
  width: 100%;
  height: 100%;
  color: #000000;
}
.p-R-22 {
  // padding-left: 22px;
  padding: 10px;
    box-sizing: border-box;
    background: #fff;
    width: 98%;
    margin: 4px auto;
}
.block {
  margin-left: 40px;
  width: 240px;
  .pailie {
    display: flex;
    align-items: center;
    .a1 {
      width: 0px;
      height: 0px;
      border: 4px solid #3591eb;
      margin-right: 8px;
    }
    .a2 {
      font-size: 16px;
    }
  }
}

.one1 {
  display: flex;
  align-items: center;
  .gang {
    height: 14px;
    width: 3px;
    background-color: #b8d9f4;
  }
  .use {
    margin: 0 6px;
    font-size: 15px;
    font-weight: 600;
  }
  .tu {
    font-size: 18px;
  }
  .tu1 {
    font-size: 18px;
  }
}
.sameBiao {
  border: #c7c6c6 1px solid;
  padding: 1px 14px;
  padding-bottom: 2px;
}
.samedif {
  border: #376ea4 2px solid;
  color: #376ea4;
}
.sameTime {
  border: #c7c6c6 1px solid;
  padding: 1px 14px;
  height: 26px;
  line-height: 22px;
}
.sameTimeDiff {
  border: #3591eb 2px solid;
  color: #3591eb;
}
</style>
